<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <link rel="stylesheet" href="css/reset.css">
  <link rel="stylesheet" href="./css/userinfo.css">
  <link rel="icon" href="img/京东-01.png">
  <style>
    .top {
      width: 100%;
      height: 60px;
      background-color: #83cbac;
    }

    .top span {
      height: 60px;
      line-height: 60px;
      float: left;
      margin-left: 100px;
      font-size: 16px;
    }

    .top ul {
      float: right;
      width: 1000px;
      height: 60px;
      line-height: 60px;
    }

    .top li {
      float: left;
      width: 200px;
      height: 60px;
      text-align: center;
      font-size: 16px;
    }

    .top ul a {
      float: left;
      width: 200px;
      height: 60px;
    }

    .top ul li:hover a {
      background-color: #1a6840;
      color: white;
    }

    .dibu {
      height: 85px;
      background: #111b24;
      font-size: 12px;
      color: #9699a8;
      line-height: 24px;
      text-align: center;
      padding-top: 20px;
      margin-top: 52px;
    }
  </style>
</head>

<body>
  <div class="top">
    <span style="cursor: pointer;">京东</span>
    <ul>
      <li class="login">
        <a href="登录.html">登录</a>
      </li>
      <li class="register">
        <a href="注册.html">注册</a>
      </li>
      <li>
        <a href="我的订单.html">我的订单</a>
      </li>
      <li>
        <a href="我的京东.html">我的京东</a>
      </li>
      <li>
        <a href="list.html">商品列表</a>
      </li>
    </ul>
  </div>
  <div class="container" style="overflow: hidden;">
    <div class="content clearfix" style="margin-top: 40px;">
      <div class="leftmenu fl">
        <ul>
          <li>
            <a href="我的京东.html">会员信息</a>
          </li>
          <li>
            <a href="我的京东.html">个人资料</a>
          </li>
          <li>
            <a href="editUser.html">修改信息</a>
          </li>
          <li>
            <a href="editpass.html">修改密码</a>
          </li>
        </ul>
      </div>
      <div class="rightcontent fr">
        <table width="1000">
          <caption>
            <h2>个人资料</h4>
          </caption>
          <tbody>
            <tr>
              <td>用户名：</td>
              <td>zhangsan </td>
            </tr>
            <tr>
              <td>昵称：</td>
              <td>zhangsan </td>
            </tr>
            <tr>
              <td>身份：</td>
              <td>zhangsan </td>
            </tr>
            <tr>
              <td>性别：</td>
              <td><input type="text"> </td>
            </tr>
            <tr>
              <td>年龄：</td>
              <td><input type="text"> </td>
            </tr>
            <tr>
              <td></td>
              <td>
                <input type="button" value="提交修改">
              </td>
            </tr>
          </tbody>
        </table>
      </div>
    </div>
  </div>
  <div class="dibu">
    <p>周帅帅集团能力有限公司</p>
    <p>周帅帅著</p>
    <p>京ICP备12003911号-6 &nbsp Copyright &copy2013-2019</p>
  </div>
</body>
<script>
  var span = document.querySelector('.top span')
  span.onclick = function () {
    location.href = '首页.html'
  }

  function getCookie(key) {
    var cookie = document.cookie;
    var arr = cookie.split('; ')
    for (var i = 0; i < arr.length; i++) {
      var brr = arr[i].split('=')
      if (brr[0] === key) {
        return brr[1]
      }
    }
  }
  var username = getCookie('username')
  console.log(username);

  // var sex = getCookie('sex')
  // console.log(sex);

  function setCookie(key, value, seconds) {
    var date = new Date()
    date.setTime(date.getTime() + seconds * 1000 - 8 * 3600 * 1000)
    document.cookie = key + '=' + value + ';expires=' + date
  }
  // 将cookie中的用户名显示在页面上
  if (username) {
    // 显示在页面上
    var loginLi = document.querySelector('.login');
    loginLi.innerHTML = `
    <a href="">欢迎尊贵的${username}</a>
    `

    var registerLi = document.querySelector('.register');
    registerLi.innerHTML = `
        <a href="javascript:;" class="logout">登出</a>
    `

    // 登出
    document.querySelector('.logout').onclick = function () {
      loginLi.innerHTML = `
            <a href="登录.html">登录</a>
        `
      registerLi.innerHTML = `
            <a href="注册.html">注册</a>
        `

      // 删除cookie - 重新设置cookie - 将失效的时间日期对象设置在上一秒
      setCookie('username', null, -1)
    }
  }
</script>
<script src="./js/jquery-3.6.0.js"></script>
<script src="./js/layer/dist/layer.js"></script>
<script src="./js/utils.js"></script>
<script src="./js/editUser.js"></script>

</html>